<template>
	<view>
		<view class="on-back zy-row"  >
			<view @click="onBack" class="">
				<zywork-icon  type="icon-fanhuijiantou" size="50" color="#fff" ></zywork-icon>
			</view>
			<text class="title">图片详情</text>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular  :autoplay="true" :interval="5000"
				>
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode="heightFix"></image>
				</swiper-item>
			</swiper>
			<view class="img-details">
			</view>
			<text>1/6</text>
		</view>
		<view class="zy-col list-item">
			<view class="zy-row item-details">
				<text class="item-title" style="font-weight: 800;color: #000;font-size: 38rpx;">网鞋鞋面</text>
			</view>
			<view class="zy-row item-details">
				<text class="item-title">订单编号：</text>
				<text>teiwu439834802832u49</text>
			</view>
			<view class="zy-row item-details">
				<text class="item-title">服务类型：</text>
				<text>清洗-网面球鞋</text>
			</view>
			<view class="zy-row item-details">
				<text class="item-title">数量：</text>
				<text>20</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:['/static/order/ceshibj.png'],
				top:0
			};
		},
		onLoad() {
		},
		methods:{
			/**
			 * 返回
			 */
			onBack() {
			  uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	
	.on-back{
		width: 100%;
		height: 62rpx;
		position: absolute;
		z-index: 1;
		right: 0rpx;
		align-items: center;
		padding-left: 36rpx;
		top: calc(55rpx + var(--status-bar-height));
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 230rpx;
		}
	}
	
	.uni-margin-wrap{
		position: relative;
		width: 100%;
		height: 750rpx;
		swiper{
			width: 100%;
			height: 750rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.img-details{
			position: absolute;
			z-index: 5;
			bottom: 20rpx;
			right: 28rpx;
			width: 98rpx;
			height: 62rpx;
			background: #000000;
			border-radius: 38rpx;
			opacity: 0.38;
		}
		text{
			position: absolute;
			z-index: 100;
			bottom: 32rpx;
			right: 52rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	
	.list-item{
		background-color: #fff;
		padding: 20rpx 28rpx;
		.item-details{
			text{
				font-size: 28rpx;
			}
			.item-title{
				text-align: right;
				min-width: 140rpx;
				color: #333333;
			}
			&:nth-child(n+2){
				margin-top: 20rpx;
			}
			
			.item-right {
				flex-wrap: wrap;
				width: 620rpx;
				text {
					height: 42rpx;
					line-height: 42rpx;
					&:nth-child(n+2){
						margin-left: 20rpx;
					}
					&:nth-child(3n+1){
						margin-left: 0rpx;
					}
				}
			}
		}
		
	}
</style>
